<template name="listar">
    <div id="borrar" title="Desea borrar estos usuarios?" style="display: none">
        <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span><strong>Atenci&oacuten!</strong><br/>Al borrar a estos usuarios estos no podr&aacute;n volver a ingresar a SETU. Desea continuar?</p>
    </div>
    <h2>Usuarios Finales - Administrar</h2>
    Elija el criterio con el que desea filtrar usuarios finales.
    <br/><strong>Ning&uacute;n campo es obligatorio.</strong> S&oacute;lo aquellos campos que contengan datos ser&aacute;n utilizados para filtrar la b&uacute;squeda.
    <br/>Los filtros incorrectos ser&aacute;n ignorados para realizar la b&uacute;squeda.
    <br/><br/>
    <form method="post" action="{{search_url}}">
        <table>
            <tr>
                <th>Registrado:</th>
                <td colspan="3">Desde <input type="text" id="fecha_registro_desde" value="{{[filter][register_from]}}" name="filter[register_from]" /> hasta <input type="text" id="fecha_registro_hasta" value="{{[filter][register_to]}}" name="filter[register_to]"/> </td>
            </tr>
            <tr>
                <th>&Uacute;ltimo ingreso:</th>
                <td colspan="3">Desde <input type="text" id="fecha_login_desde" value="{{[filter][login_from]}}" name="filter[login_from]" /> hasta <input type="text" id="fecha_login_hasta" value="{{[filter][login_to]}}" name="filter[login_to]"/> </td>
            </tr>
            <tr>
                <th>Nombre de usuario:</th>
                <td><input type="text" name="filter[username]" value="{{[filter][username]}}"/></td>
                <th>Email:</th>
                <td><input type="text" name="filter[email]" value="{{[filter][email]}}"/></td>
            </tr>
            <tr>
                <th>Nombre:</th>
                <td><input type="text" name="filter[fname]" value="{{[filter][fname]}}"/></td>
                <th>Apellido:</th>
                <td><input type="text" name="filter[lname]" value="{{[filter][lname]}}"/></td>
            </tr>
            <tr>
                <th>Resultados por p&aacute;gina</th>
                <td colspan="3" style="text-align: left">
                    <select name="filter[per_page]" id="per_page">
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                        <option value="max">Todos los usuarios</option>
                    </select>
                </td>
            </tr>
        </table>
        <br/>
        <input type="submit" value="Buscar usuarios" id="buscar_btn"/>
    </form>
    <br/>
    <template name="results">
        <form method="post" action="{{delete_link}}" id="delete_form">
            <h2>Resultados de la b&uacute;squeda</h2>
            {{pagination}}
            <br/>
            <input type="checkbox" id="select_all_button" value="sel" name="select_all_button" /> <label for="select_all_button">Seleccionar todos</label>
            <br/><br/>
            <table style="width:100%">
                <tr>
                    <th></th>
                    <th>ID#</th>
                    <th>Nombre</th>
                    <th>Apellido</th>
                    <th>Email</th>
                    <th>Usuario</th>
                    <th>Registo</th>
                    <th>Ult. Ingreso</th>
                </tr>
                <template name="usuario">
                <tr class="usr_row">
                    <td><input type="checkbox" name="users[]" value="{{iduser}}" class="usr_check"/> </td>
                    <td>{{iduser}}</td>
                    <td>{{fname}}</td>
                    <td>{{lname}}</td>
                    <td>{{email}}</td>
                    <td>{{username}}</td>
                    <td>{{register_date}}</td>
                    <td>{{last_login_date}}</td>
                </tr>
                </template>
            </table>
            <br/>
            <div id="delete_button">Borrar seleccionados</div>
            <input type="hidden" value="{{delete_keep_url}}" name="delete_keep_url" />
        </form>
        <br/>
        {{pagination}}
    </template>
    <script type="text/javascript">
        var perPageVal = '{{[filter][per_page]}}';

        $(function(){
            $('#per_page').val(perPageVal);
            $('#fecha_registro_desde').datepicker({
                changeMonth : true,
                changeYear  : true,
                beforeShow  : function()
                {
                    var auxDate = $('#fecha_registro_hasta').val();
                    if (auxDate != '')
                    {
                        $(this).datepicker('option', 'maxDate', auxDate);
                    }
                    else
                    {
                        $(this).datepicker('option', 'maxDate', '+0d');
                    }
                },
                showButtonPanel: true,
                closeText: 'Vaciar',
                onClose: function (dateText, inst)
                {
                    if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
                    {
                        document.getElementById(this.id).value = '';
                    }
                }
            });
            $('#fecha_registro_hasta').datepicker({
                changeMonth : true,
                changeYear  : true,
                beforeShow  : function()
                {
                    var auxDate = $('#fecha_registro_desde').val();
                    if (auxDate != '')
                    {
                        var auxDateArr = auxDate.split('/');
                        $(this).datepicker('option', 'minDate', auxDate);
                    }
                    $(this).datepicker('option', 'maxDate', '+0d');
                },
                showButtonPanel: true,
                closeText: 'Vaciar',
                onClose: function (dateText, inst)
                {
                    if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
                    {
                        document.getElementById(this.id).value = '';
                    }
                }
            });
            $('#fecha_login_desde').datepicker({
                changeMonth : true,
                changeYear  : true,
                beforeShow  : function()
                {
                    var auxDate = $('#fecha_login_hasta').val();
                    if (auxDate != '')
                    {
                        $(this).datepicker('option', 'maxDate', auxDate);
                    }
                    else
                    {
                        $(this).datepicker('option', 'maxDate', '+0d');
                    }
                },
                showButtonPanel: true,
                closeText: 'Vaciar',
                onClose: function (dateText, inst)
                {
                    if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
                    {
                        document.getElementById(this.id).value = '';
                    }
                }
            });
            $('#fecha_login_hasta').datepicker({
                changeMonth : true,
                changeYear  : true,
                beforeShow  : function()
                {
                    var auxDate = $('#fecha_login_desde').val();
                    if (auxDate != '')
                    {
                        var auxDateArr = auxDate.split('/');
                        $(this).datepicker('option', 'minDate', auxDate);
                    }
                    $(this).datepicker('option', 'maxDate', '+0d');
                },
                showButtonPanel: true,
                closeText: 'Vaciar',
                onClose: function (dateText, inst)
                {
                    if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
                    {
                        document.getElementById(this.id).value = '';
                    }
                }
            });
            $('#buscar_btn').button();
            $('.usr_check').bind('click', function(){
                var o = $(this);
                if (($('.usr_check').length) == ($('.usr_check:checked').length))
                {
                    $('#select_all_button').prop('checked', true);
                }
                else
                {
                    $('#select_all_button').prop('checked', false);
                }
                if(o.is(':checked'))
                {
                    o.parent().parent().children('td').css('background-color', '#c3c3c3');
                }
                else
                {
                    o.parent().parent().children('td').css('background-color', '#FFFFFF');
                }
            });
            $('#delete_button').button( { icons: {primary: "ui-icon-circle-close"} } ).bind('click', function(){
                $("#borrar").dialog({
                    resizable: false,
                    height:240,
                    modal: true,
                    buttons:
                    {
                        "Borrar": function() {
                            $( this ).dialog( "close" );
                            if($('.usr_check:checked').length > 0)
                            {
                                $('#delete_form').submit();
                            }
                            else
                            {
                                error('No hay usuarios seleccionados');
                            }
                        },
                        "Cancelar": function() {
                            $( this ).dialog( "close" );
                        }
                    }
                });
            });
            $('#select_all_button').css({'height':'15px', 'margin':'0px'}).bind('click', function(){
                var o = $(this);
                if(o.is(':checked'))
                {
                    $('.usr_check:not(:checked)').trigger('click');
                }
                else
                {
                    $('.usr_check:checked').trigger('click');
                }
            });
            $('<style type="text/css"> .ui-datepicker-current { display: none; } </style>').appendTo("head");
        });
    </script>
</template>